<template>
  <div id="editor">
    <div>
      <el-form
        :model="form"
        ref="form"
        label-width="80px"
        label-position="left"
        style="width: 60%; max-width: 600px"
      >
        <el-form-item
          label="标题"
          prop="title"
          :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]"
        >
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="截止日期" prop="ddl">
          <el-date-picker v-model="form.ddl" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="网申地址" prop="website">
          <el-input v-model="form.website"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <mavon-editor
      class="mavonEditor"
      :toolbars="toolbars"
      v-model="content"
    ></mavon-editor>
    <div style="text-align: center">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="handleCancel" style="margin: 10px">取消</el-button>
    </div>
  </div>
</template>

<style scoped>
#editor {
  padding: 40px;
}

.blog-edit-title,
.blog-edit-outline,
.blog-edit-tag {
  margin: 10px;
  text-align: left;
}
</style>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { addJob, editJob, getJob } from '@/api/job.js'
import { title } from '@/settings';

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      id: '',
      isCreate: true,
      form: {
        title: "",
        ddl: "",
        website: "",
        email: "",
      },
      content: "",
      datetime: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true // 导航目录
      }
    };
  },
  created() {
    let id = this.$route.query.id
    if (id) {
      this.isCreate = false
      let data = { id: id }
      getO(data).then(response => {
        this.id = response.data.id
        this.content = response.data.content
        this.form.title = response.data.title
        this.form.ddl = response.data.ddl
        this.form.website = response.data.website
        this.form.email = response.data.email
        this.datetime = response.data.datetime
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.isCreate = true
    }
  },
  methods: {
    handleCancel() {
      this.$confirm('此操作将放弃所有已编辑内容，确定取消嘛？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用全局挂载的方法
        this.$store.dispatch('tagsView/delView', this.$route)
        // 返回上一步路由
        this.$router.push('/job/index')
      }).catch(() => {
        //do nothing
      });
    },
    handleSubmit() {
      let d = new Date()
      if (datetime) { this.datetime = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() }
      let ddl = new Date(this.form.ddl)


      this.$refs['form'].validate((valid) => {
        if (valid) {
          //上传给后端
          if (this.isCreate) {
            let data = {
              title: this.form.title,
              ddl: ddl.getFullYear() + "-" + (ddl.getMonth() + 1) + "-" + ddl.getDate(),
              website: this.form.website,
              email: this.form.email,
              content: this.content,
              datetime: this.datetime
            }

            addJob(data).then(response => {
              this.$message({
                type: 'success',
                message: '创建招聘信息成功'
              })
              // 调用全局挂载的方法
              this.$store.dispatch('tagsView/delView', this.$route)
              // 返回上一步路由
              this.$router.push('/job/index')
            }).catch(err => {
              console.log(err);
            })
          } else {
            let data = {
              id: this.id,
              title: this.form.title,
              ddl: ddl.getFullYear() + "-" + (ddl.getMonth() + 1) + "-" + ddl.getDate(),
              website: this.form.website,
              email: this.form.email,
              content: this.content,
              datetime: this.datetime
            }

            editJob(data).then(response => {
              this.$message({
                type: 'success',
                message: '修改招聘信息成功'
              })
              // 调用全局挂载的方法
              this.$store.dispatch('tagsView/delView', this.$route)
              // 返回上一步路由
              this.$router.push('/job/index')
            }).catch(err => {
              console.log(err);
            })
          }

        } else {
          //提示有问题
          this.$message({
            message: 'title未填写，请填写完整~',
            type: 'error'
          })
        }
      });
    }
  }
};
</script>
